<template>
<el-dialog
  title="签章设置"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
    <div class="modal-main">
            <div class="modal-setting">
            <div>
                <span>签章大小设置：</span>
                <el-radio-group v-model="modalZoom">
                <el-radio :label="0.5"><span>小</span></el-radio>
                <el-radio :label="0.75"><span>中</span></el-radio>
                <el-radio :label="1"><span>大</span></el-radio>
                </el-radio-group>
            </div>
            <div class="modal-sign-date">
                <span>显示签署人角色：</span>
                <el-checkbox v-model="modalIsShowRole"></el-checkbox>
            </div>
              <div class="modal-sign-date">
                <span>显示签署日期：</span>
                <el-checkbox v-model="modalIsShowDate"></el-checkbox>
            </div>
            </div>
            <div class="modal-sign-box">
            <div class="seal-box signMethod0" :style="{height:defaultHeight * modalZoom * this.scale + 'px',width:defaultWidth * modalZoom * this.scale + 'px'}">
                <div class="div-icon">
                <!-- <img v-if="this.signUserObj.relationType==='个人'" src="../../../assets/images/drag/icon-personal.png"/>
                <img v-else src="../../../assets/images/drag/icon-enterprise.png"/> -->
                </div>
                <div v-if="this.modalSignMethod === '0'" class="seal-box-sign modal-move-div" @mousedown="modalMoveBox" :style="{top:modalSignatureY * 100 + '%'}">
                <span :style="{height:this.calFontSize(modalSubSignerName) * this.modalZoom * this.scale +'px',fontSize:this.calFontSize(modalSubSignerName) * this.modalZoom * this.scale +'px',transform:'scale('+((this.calFontSize(modalSubSignerName) * this.modalZoom * this.scale / 12) > 1 ? 1 : (this.calFontSize(modalSubSignerName) * this.modalZoom * this.scale / 12))+')'}">{{modalSubSignerName}}</span></div>
                <div v-if="this.modalSignMethod === '1'" class="seal-box-sign" :style="{top:modalSignatureY * 100 + '%',height:'75%'}"><span class="img-zhang"></span></div>
                <div v-if="this.modalSignMethod === '2'" class="seal-box-sign modal-move-div" @mousedown="modalMoveBox" :style="{top:modalSignatureY * 100 + '%',height:'37.5%'}">
                <span class="img-yin"></span></div>
                <div class="seal-box-info modal-move-div" v-if="modalIsShowDate" @mousedown="modalMoveBox" :style="{top:modalTimeY * 100 + '%',height:'8.75%'}">
                <span :style="{fontSize:58 * 0.3 * modalZoom * this.scale + 'px',transform:'scale('+((58 * 0.3 * this.modalZoom * this.scale / 12) > 1 ? 1 : (58 * 0.3 * this.scale * this.modalZoom / 12))+')'}">{{'YYYY年MM月DD日'}}</span></div>
            </div>
            </div>
        </div>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>
</template>

<script>
export default {
  name: 'EditSign',
  props: {},
  components: {},
  data () {
    return { // 签章设置
        defaultWidth: 150,
        defaultHeight: 200,
        modalSignatureY: 0.25,
        dialogVisible: false,
        signInfo: {},
        scale: 1.5,
        modalIsShowDate: true, // 默认展示签署日期
        modalIsShowRole: true, // 默认展示签人角色
        modalZoom: 1 // 默认size
    }
  },
  computed: {},
  created () {
  },
  mounted () {

  },
  methods: {
     modalMoveBox (e) {
      let dom = e.currentTarget // 获取目标元素
      let top = this.getNum(dom.style.top) / 100

      let height = dom.clientHeight
      // 点击签字鼠标原始位置
      // let xx = this.getPos(e).x
      let yy = this.getPos(e).y

      document.onmousemove = e => {
        // 移动后鼠标位置
        // let xxx = this.getPos(e).x
        let yyy = this.getPos(e).y
        // 移动的鼠标距离
        // let changeX = xxx - xx
        let changeY = yyy - yy

        let domTop = top + (changeY / (this.defaultHeight * this.modalZoom * this.scale))
        if (domTop < 0) {
          domTop = 0
        }

        let maxTop = (this.defaultHeight * this.modalZoom * this.scale - height) / (this.defaultHeight * this.modalZoom * this.scale)
        if (domTop > maxTop) {
          domTop = maxTop
        }

        dom.style.top = (domTop * 100).toFixed(4) + '%'

        if (dom.className.indexOf('seal-box-sign') > -1) {
          this.modalSignatureY = parseFloat(domTop.toFixed(4))
        }
        if (dom.className.indexOf('seal-box-info') > -1) {
          this.modalTimeY = parseFloat(domTop.toFixed(4))
        }
      }
      document.onmouseup = e => {
        document.onmousemove = null
        document.onmouseup = null
      }
    },
    handleReset () {

    },
    handleShow (row) {
        this.signInfo = row
        this.dialogVisible = true
    },
    handleClose () {
        this.dialogVisible = false
    }
  }
}
</script>

<style scoped>
  .modal-sign-date{
    margin-top: 50px;
  }
  .modal-setting{
    font-size: 14px;
    width: 49%;
    float: left;
  }
  .modal-sign-box{
    width: 49%;
    float: left;
    margin-bottom: 20px;
  }
  .modal-move-div{
    border: 0.5px black solid;
  }
</style>
